<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>UDP Video Stream via WebSocket</title>
</head>
<body>
    <h1>Video Stream</h1>
    <video id="videoElement" controls autoplay width="640" height="480"></video>

    <script>
        const videoElement = document.getElementById('videoElement');
        const ws = new WebSocket('ws://localhost:7681');

        ws.onopen = function() {
            console.log('WebSocket connection established');
            ws.send("发送数据");
        };

        ws.onmessage = function(event) {
            console.log('receive:' + event.data);
/*
            // 将接收到的数据（假设是视频帧数据）传递给 video 元素
            const videoBlob = new Blob([event.data], { type: 'video/mp4' });
            const videoURL = URL.createObjectURL(videoBlob);
            videoElement.src = videoURL;
            */
        };

        ws.onclose = function() {
            console.log('WebSocket connection closed');
        };
    </script>
</body>
</html>

